<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" :list="listBar"></u-notice-bar>


		<view class="v2">

			<!-- <button @click="open">打开弹窗</button> -->
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog mode="base" message="提示" :duration="2000" :before-close="true" @close="close"
					@confirm="confirm">
					<view>
						<text class="cuIcon-warn text-blue u-font-lg">{{' '}} 请确认提交</text>
					</view>
				</uni-popup-dialog>
			</uni-popup>



			<!-- 图片上传 -->
			<view class="cu-bar bg-white margin-top-xs u-border-bottom">
				<view class="action sub-title">
					<text class="text-xl text-bold text-them text-shadow">上传图片 (必填)</text>
					<text class="text-ABC text-them">information</text>
				</view>
			</view>

			<view>
				<u-upload ref="uUpload" :header="{'header':'header'}" :max-count="1" :action="action"
					:auto-upload="false">

				</u-upload>
			</view>


			<!-- 信息填写 -->
			<view class="cu-bar bg-white margin-top-xs u-border-bottom">
				<view class="action sub-title">
					<text class="text-xl text-bold text-them text-shadow">主要信息 (必填)</text>
					<text class="text-ABC text-them">information</text>
				</view>
			</view>

			<u-form :model="form" ref="uForm">

				<u-form-item label="猫咪昵称:" left-icon="tags" borderBottom label-width="200">
					<u-input v-model="form.catName" placeholder="请输入姓名"></u-input>
				</u-form-item>

				<u-form-item label="猫咪性别:" left-icon="man" label-width="200" borderBottom ref="item2">
					<u-radio-group v-model="form.catGender">
						<u-radio v-for="(item, index) in sexList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>


				<u-form-item label="首次发现:" left-icon="eye" borderBottom label-width="200">
					<u-input v-model="form.catView" placeholder="时间+地点(例:xx年x月尚行楼)"></u-input>
				</u-form-item>

				<u-form-item label="猫咪种类:" left-icon="list-dot" label-width="200" borderBottom ref="item2">
					<u-radio-group v-model="form.catType">
						<u-radio v-for="(item, index) in typeList" :key="index" :shape="'square'" :label-size="20"
							:name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="猫咪情况:" left-icon="pushpin" label-width="200" borderBottom ref="item2">
					<u-radio-group v-model="form.catSituation">
						<u-radio v-for="(item, index) in situationList" :key="index" :shape="'square'" :name="item.name"
							:label-size="20" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="猫咪性格:" left-icon="heart" label-width="200" borderBottom ref="item2">
					<u-radio-group v-model="form.catCharacter">
						<u-radio v-for="(item, index) in characterList" :key="index" :shape="'square'" :name="item.name"
							:label-size="20" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="绝育情况:" left-icon="integral" label-width="200" borderBottom ref="item2">
					<u-radio-group v-model="form.catBirth">
						<u-radio v-for="(item, index) in birthList" :key="index" :shape="'square'" :name="item.name"
							:label-size="20" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<view class="cu-bar bg-white margin-top-xs u-border-bottom">
					<view class="action sub-title">
						<text class="text-xl text-bold text-them text-shadow">主要信息 (选填)</text>
						<text class="text-ABC text-them">information</text>
					</view>
				</view>

				<u-form-item label="送养时间:" left-icon="clock" label-width="200" borderBottom ref="item2">
					<!-- <uni-section :title="'日期用法：' + single" type="line"></uni-section> -->
					<view class="example-body">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="form.catAdoption"
							@maskClick="maskClick" />
					</view>
				</u-form-item>

				<u-form-item label="离世时间:" left-icon="clock" label-width="200" borderBottom ref="item2">
					<!-- <uni-section :title="'日期用法：' + single" type="line"></uni-section> -->
					<view class="example-body">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="form.catDie"
							@maskClick="maskClick" />
					</view>
				</u-form-item>

				<u-form-item label="猫咪外貌:" left-icon="bookmark" borderBottom label-width="200">
					<u-input v-model="form.catMoreAppearance" placeholder="请输入外貌特点"></u-input>
				</u-form-item>

				<u-form-item label="出没地点:" left-icon="map" borderBottom label-width="200">
					<u-input v-model="form.catMorePlace" placeholder="请输入出没地点"></u-input>
				</u-form-item>

				<u-form-item label="猫咪关系:" left-icon="attach" borderBottom label-width="200">
					<u-input v-model="form.catMoreRelationship" placeholder="请输入与之有关系的猫咪"></u-input>
				</u-form-item>

				<u-form-item label="更多信息:" left-icon="plus-circle" borderBottom label-width="200">
					<u-input v-model="form.catMoreDetail" placeholder="请输入其他信息"></u-input>
				</u-form-item>

				<u-form-item label="作者昵称:" left-icon="edit-pen" borderBottom label-width="200">
					<u-input v-model="form.catAuthor" placeholder="请输入您的昵称"></u-input>
				</u-form-item>

				<!-- 打开弹窗 -->
				<view style="width: 90%;margin: auto;margin-top: 30rpx;margin-bottom: 15rpx;">
					<u-button @click="open" :ripple='true'>
						上传信息
					</u-button>
				</view>

			</u-form>
		</view>
		
		<view style="height: 10rpx;"></view>


		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		getUserInfo,
		getToken
	} from '@/utils/auth';
	import imgData from "@/common/uiImg.js";
	export default {
		data() {
			return {
				pageName: '猫咪图鉴上传',
				listBar: ['发现了还未记录的猫咪？那就赶快拍照上传吧！❤'],
				// action: 'http://localhost:8083/common/upload',
				action: this.uploadimg(),
				filesArr: [],

				show: '',

				form: {
					catImg: "",

					catName: "", // 名称
					catGender: "雄", // 性别
					catType: "三花和玳瑁", //类型
					catView: "", // 首次发现
					catSituation: "在读",
					catCharacter: "亲人可抱",

					catBirth: "未绝育",

					catAdoption: "", // 领养时间
					catDie: "", // 死亡时间

					catMoreAppearance: "",
					catMorePlace: "",
					catMoreRelationship: "",
					catMoreDetail: "",
					catAuthor: "",
					catUpdate: "",

					creatTime: "",
					openid: "",

				},

				// 猫咪性别选择
				sexList: [{
						name: '雄',
						disabled: false
					},
					{
						name: '雌',
						disabled: false
					},
				],

				// 猫咪种类选择
				typeList: [{
						name: '三花和玳瑁',
						disabled: false
					},
					{
						name: '橘猫和橘白',
						disabled: false
					},
					{
						name: '奶牛',
						disabled: false
					},
					{
						name: '狸花',
						disabled: false
					},
					{
						name: '纯色',
						disabled: false
					},
				],

				//猫咪情况选择
				situationList: [{
						name: '在读',
						disabled: false
					},
					{
						name: '毕业',
						disabled: false
					},
					{
						name: '休学',
						disabled: false
					},
					{
						name: '猫星',
						disabled: false
					},
				],
				//猫咪性格选择
				characterList: [{
						name: '亲人可抱',
						disabled: false
					},
					{
						name: '可摸不可抱',
						disabled: false
					},
					{
						name: '不可摸不可抱',
						disabled: false
					},
				],
				//猫咪绝育选择
				birthList: [{
						name: '未绝育',
						disabled: false
					},
					{
						name: '已绝育',
						disabled: false
					},
					{
						name: '未知',
						disabled: false
					},
				],
			}
		},
		onLoad() {

			this.goRegister()
			console.log("action:", this.action)

		},



		methods: {


			//提示
			showToast(e) {

				//警告提示 【选项检查】
				if (e[0] != 'confirm') {
					this.$refs.uToast.show({
						title: e[0],
						type: 'error',
						url: e[1]
					})
					return
				}

				// 获得图片路径
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})


				try {
					//如果失败
					if (files[0].response == null || files[0].response == undefined) {
						//提示发送错误，请稍后重试
						this.$refs.uToast.show({
							title: '未上传图片或上传图片失败',
							type: 'error',
							url: ''
						})
						return
					}
					if (files[0].response.code == 200) {

						//图片路径打印
						// console.log('this.files:', files)

						//信息打包发送
						this.form.catImg = files[0].response.fileName
						console.log(this.form)

						//发送请求
						// this.request('uploadCat', this.form, 'POST').then(res => {

						this.$u.api.uploadCat(this.form).then(res => {
							console.log("res:", res)

						})

						//提示成功
						this.$refs.uToast.show({
							title: '上传成功',
							type: 'success',
							url: '/pages/index/tabbar'
						})

					} else {
						//提示发送错误，请稍后重试
						this.$refs.uToast.show({
							title: '上传失败，请稍后重试',
							type: 'error',
							url: ''
						})

					}
				} catch (e) {
					//TODO handle the exception
					this.$refs.uToast.show({
						title: '未上传图片或上传图片失败 请稍后再试',
						type: 'error',
						url: ''
					})
				}

			},


			//打开弹窗
			open() {
				let e = [];
				e[0] = '';
				e[1] = '';
				// 信息检查

				// 昵称检查
				if (this.form.catName == '' || this.form.catName == NaN || this.form.catName == null) {
					e[0] = '猫咪昵称不能为空'
					this.showToast(e)
					return
				}

				// 首次发现
				if (this.form.catView == '' || this.form.catView == NaN || this.form.catView == null) {
					e[0] = '发现地点不能为空'
					this.showToast(e)
					return
				}
				this.$refs.popup.open();
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm() {
				// TODO 
				//确认无误后，上传图片
				this.$refs.uUpload.upload();


				// 关闭弹窗
				this.$refs.popup.close()


				//开启加载画面
				uni.showLoading({
					title: '上传中'
				});

				//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
				this.timer = setTimeout(() => {
					//TODO 
					//关闭加载画面
					uni.hideLoading();

					let e = ['confirm'] // 说明已经确定

					//开启弹窗
					this.showToast(e);
				}, 2000);




			},

			// 日期选择遮罩
			maskClick(e) {
				console.log('maskClick事件:', e);
				console.log(this.form.catDie);
			},

			// 强制用户进行登陆
			goRegister() {
				let openid = getToken();

				if (openid) { // 判断是否登陆
					this.form.openid = openid
				} else {
					//返回跳转
					this.$refs.uToast.show({
						title: '需要登陆才可以上传图鉴哟 ❤',
						type: 'error',
						url: ''
					})
					//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
					this.timer = setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);


				}
			},





		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #fbfffd, #ebfbff);

	}
</style>

<style lang="scss" scoped>

	.v2 {
		border-radius: 15rpx !important;
		
		background-color: #fff;
		width: 85%;
		margin: 50rpx auto 0;
		padding: 20rpx;
		text-align: left;
		margin-bottom: 50rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
	}



</style>
